<template>
    <div>
        <div class="flex-end-r">
            <el-button @click="go2service">上架</el-button>
        </div>
        <div class="flex-start" style="width:1200px;">
            <left-container @myclick="clickLeftItem"></left-container>
            <draggable @start="start" @end="end" :options="draggerOptions" style="width:400px;">
                <dragger-item @click.native="selectEditItem(item)" v-for="(item,index) in resultList" :key="item.id"
                              :class="[currentIndex===index?'moveing':'',editItem&&editItem.id===item.id?'isEdit':'']"
                              :item="item">
                    <div>{{item.type}}</div>
                </dragger-item>
            </draggable>

            <div></div>
        </div>
    </div>

</template>
<script>
    import draggable from 'vuedraggable';
    // import Vue from 'vue';
    // import Element from 'element-ui';
    // Vue.use(Element, { size: 'small', zIndex: 3000 });
    import * as myalert from '@/util/myalert'
    import uuid from 'uuid/v1'
    import jquery from 'jquery'
    import {base_url} from "../../config";

    export default {
        components: {
            draggable,
            "left-container": () => import('./left'),
            "dragger-item": () => import('./dragger-item')
        },
        name: "editAllParent",
        data() {
            return {
                id: "",
                resultList: [],
                currentIndex: null,
                editItem: null,
                draggerOptions: {
                    // group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
                    // sort: true,  // 内部排序列表
                    delay: 0, // 以毫秒为单位定义排序何时开始。
                    touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
                    // disabled: true, // 如果设置为真，则禁用sortable。
                    store: null,  // @see Store
                    animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
                    // handle: ".my-handle",  // 在列表项中拖动句柄选择器。
                    // filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
                    // preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
                    // draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
                    ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
                    chosenClass: "sortable-chosen",  // 设置被选中的元素的class
                    dragClass: "sortable-drag",  //拖动元素的class。
                    dataIdAttr: 'data-id',

                    forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
                    fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
                    fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
                    fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
                    scroll: true, // or HTMLElement
                    // scrollFn: function (offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { }, // if you have custom scrollbar scrollFn may be used for autoscrolling
                    scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
                    scrollSpeed: 10, // px
                },

            }
        },
        methods: {
            go2service() {
                if (!this.resultList.length) {
                    return
                }
                var self = this
                myalert.confirm("确定上架?").then(isyes => {
                    if (isyes.confirm) {
                        var _uuid = self.id || uuid()
                        jquery.post(`${base_url}/redis/set?time=${60 * 60}&key=${_uuid}`, {
                            resultList: self.resultList,
                            a: 'test'
                        }).then(res => {
                            myalert.successConfirm(`请记住路径,一个小时后失效 http://www.liumingtai.com:9014/#/client?id=${_uuid}`)
                        })
                    }
                })
            },
            clickLeftItem(item) {
                this.resultList.push(item)
            },
            start: function (evt) {
                this.currentIndex = evt.oldIndex;
                // console.log(',=evt.oldIndex;====>', evt.oldIndex);
                this.editItem = null;
            },
            selectEditItem(item) {
                this.resultList.map(item => {
                    item.isShowEdit = false
                    return item
                })
                var index = this.resultList.findIndex(_item => _item.id === item.id)
                this.resultList[index].isShowEdit = true
                this.editItem = item

            },
            end: function (evt) {
                this.currentIndex = null;
                evt.item //可以知道拖动的本身
                evt.to    // 可以知道拖动的目标列表
                evt.from  // 可以知道之前的列表
                evt.oldIndex  // 可以知道拖动前的位置
                evt.newIndex  // 可以知道拖动后的位置
                // this.resultList= evt.to
                // console.log(',====evt=>', evt);
                var cachItem = this.resultList[evt.oldIndex]
                this.resultList.splice(evt.oldIndex, 1)
                this.resultList.splice(evt.newIndex, 0, cachItem)

            },
            move() {
                // console.log(',move=====>', e);

            },
            getModules() {
                var self = this
                return jquery.get(`${base_url}/redis/get?key=${this.id}`).then(res => {
                    self.resultList = res.result && res.result.resultList
                    self.resultList = self.resultList.map(item => {
                        item.isShowEdit = false
                        return item
                    })
                    return res.result
                })
            }
        },
        mounted() {
            this.id = this.$route.query.id
            if (this.id) {
                this.getModules()
            }
        },
    }
</script>
<style lang="scss" scoped>
    .moveing {
        position: relative;
        border: 1px dashed black;

        &:before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }

    .isEdit {
        border: 1px dashed red;
    }
</style>
